import React from 'react';
// mobx-react-lite 基于react的轻量级 状态管理
import { observer, useLocalStore } from 'mobx-react-lite';
import { useHistory } from 'react-router';
import { Link } from 'react-router-dom';
import {
  Layout,
  message,
  Badge,
  Avatar,
  Menu,
  Dropdown,
} from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  BellFilled,
} from '@ant-design/icons';
import { layoutService } from '~/services/layout';
import { userService } from '~/services/user';
import { config } from '~/config/config';
import { ChangePasswordModal } from './ChangePasswordModal';
import { FeedbackModal } from './FeedbackModal';
import './index.local.sass';

export const Header = observer(() => {
  const state = useLocalStore(() => ({
    feedbackModal: {
      visible: false,
    },
    changePasswordModal: {
      visible: false,
    },
  }));

  const history = useHistory();

  const logout = () => {
    userService
      .logout()
      .then(() => {
        message.success('Logout success');
      })
      .catch(() => {
        message.error('Logout error');
      }).finally(() => {
        history.push('/login');
      });
  };

  const changePassword = () => {
    state.changePasswordModal.visible = true;
  };

  const feedback = () => {
    state.feedbackModal.visible = true;
  };

  const menu = (
    <Menu>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" onClick={changePassword}>
          Change password
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" onClick={feedback}>
          Feedback
        </a>
      </Menu.Item>
      <Menu.Item>
        <a target="_blank" rel="noopener noreferrer" onClick={logout}>
          Logout
        </a>
      </Menu.Item>
    </Menu>
  );
// 函数组件中没有生命周期，那么可以使用 useEffect 来替代：useEffect Hook 看做 componentDidMount
  React.useEffect(() => {
    // 获取当前用户信息
    userService.getCurrentInfo();

    // 检测是否有未读的系统消息
    userService.checkMessageAlert();

    const cancelCheck = history.listen(() => {
      userService.checkMessageAlert();
    });

    return cancelCheck;
  }, []);

  return (
    <Layout.Header className="flex items-center justify-between bg-white p-0">
      <span
        className="trigger ml-4"
        onClick={() => layoutService.setCollapse(!layoutService.state.collapsed)}
      >
        {layoutService.state.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </span>

      <div className="flex mr-4">
        <Link to="/dashboard/notification">
          <Badge dot={userService.state.showAlert} >
            <BellFilled className="notifer-icon text-gray-500" />
          </Badge>
        </Link>

        <Dropdown overlay={menu} className="ml-6 cursor-pointer">
          <div>
            <Avatar src={`${config.ossUrl}${userService.state.currentInfo.headPortrait as string}`} />
            <span className="ml-2">{userService.state.currentInfo.username || '-'}</span>
          </div>
        </Dropdown>
      </div>

      {
        state.feedbackModal.visible
        && <FeedbackModal
          state={state.feedbackModal}
        />
      }

      {
        state.changePasswordModal.visible
        && <ChangePasswordModal
          state={state.changePasswordModal}
        />
      }
    </Layout.Header>
  );
});
